<!--  -->
<template>
  <div class="focusshop">
    <Nav title="关注店铺">
      <template v-slot:left>
        <span class="back" @click="$router.back()"></span>
      </template>
    </Nav>
    <div class="scroll-wrapper">
      <Scroll
        :preventDefault="true"
        :click="false"
        :tap="true"
        :pullup="true"
        :pulldown="true"
        @scrollToEnd="scrollToEnd"
        :data.sync="shopList"
        ref="myScroll"
      >
        <div>
          <ShopList :shopList.sync="shopList"></ShopList>
          <div class="loading-bottom mt-10 f-14" v-if="loading">加载中...</div>
          <div class="loading-bottom mt-10 f-14" v-if="noMore">没有更多了</div>
        </div>
      </Scroll>
    </div>
  </div>
</template>

<script>
import Nav from "../../components/Nav";
import ShopList from "../../components/ShopList";
import Scroll from "../../components/Scroll";
import Page from "../../mixin/page";
export default {
  mixins: [Page],
  components: { Nav, ShopList, Scroll },
  data() {
    return {
      shopList: []
    };
  },
  computed: {},
  watch: {},
  methods: {
    _api() {}
  },
  created() {},
  mounted() {
    for (let i = 0; i < 10; i++) {
      this.shopList.push(i);
    }
  },
  updated() {}, //生命周期 - 更新之后
  destroyed() {} //生命周期 - 销毁完成
};
</script>
<style lang='less' scoped>
@import url("../../assets/style/mixin.less");
//@import url(); 引入公共css类
.focusshop {
  height: 100%;
}
.scroll-wrapper {
  height: calc(100% - 45px);
  overflow: hidden;
}
.loading-bottom {
  width: 100%;
  text-align: center;
}
</style>